<template>
  <div class="rep-record">
    <van-nav-bar
      class="gm-nav-bar"
      left-text="维修履历"
      left-arrow
      @click-left="$router.go(-1)"
      @click-right="searchPopupShow = true"
    >
      <template #right>
        <van-icon name="search" size="18" color="#888" />
      </template>
    </van-nav-bar>
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        :error.sync="error"
        error-text="请求失败，点击重新加载"
        @load="onLoad"
      >
        <div class="card-wrap">
          <div class="gm-border-card" v-for="item in list" :key="item.Id">
            <van-cell class="gm-border-card-header" :title="item.Number">
              <template #right-icon>
                <a class="open-link" :href="item.Url">查看维修报告书</a>
              </template>
            </van-cell>
            <van-row class="card-cont" gutter="20">
              <van-col span="24">
                <van-cell class="text-cell" title="报修时间：">
                  {{ item.PresentationTime }}
                </van-cell>
              </van-col>
              <van-col span="24">
                <van-cell class="text-cell" title="维修人员：">
                  {{
                    `${item.RepairDisplayName || "无"} (${item.RepairAccount})`
                  }}
                </van-cell>
              </van-col>
              <van-col span="24">
                <van-cell class="text-cell" title="故障类型：">
                  {{ item.FaultType }}
                </van-cell>
              </van-col>
              <van-col span="24">
                <van-cell class="text-cell" title="备注：">
                  {{ item.Remarks }}
                </van-cell>
              </van-col>
            </van-row>
          </div>
        </div>
      </van-list>
    </van-pull-refresh>

    <!-- 搜索弹窗 -->
    <van-popup
      v-model="searchPopupShow"
      class="search-popup"
      position="top"
      get-container="body"
    >
      <van-cell-group>
        <van-field
          v-model="keywords.MaintainWorkName"
          label="车间"
          placeholder="请输入"
        />
        <van-field
          v-model="keywords.EquipmentLine"
          label="线别"
          placeholder="请输入"
        />
        <van-field
          v-model="keywords.FailureType"
          label="故障类型"
          placeholder="请输入"
        />
        <time-picker
          v-model="keywords.StartDate"
          label="开始时间"
          placeholder="请输入"
        />
        <time-picker
          v-model="keywords.EndDate"
          label="结束时间"
          placeholder="请输入"
        />
      </van-cell-group>
      <van-button class="popup-search-btn" type="info" @click="onSearch">
        搜索
      </van-button>
    </van-popup>
  </div>
</template>

<script>
import {
  Pad_Repair_GetMaintenanceResumeInfo, // 获取列表
} from "../../api/index";

export default {
  name: "RepRecord",
  components: {
    "time-picker": () => import("../../components/common/TimePicker.vue"),
  },
  data() {
    return {
      keywords: {
        MaintainWorkName: "",
        EquipmentLine: "",
        FailureType: "",
        StartDate: "",
        EndDate: "",
      },
      // 数据
      list: [],
      // 下拉刷新loading
      refreshing: false,
      // 上拉加载loading
      loading: false,
      // 数据全部加载完成
      finished: false,
      // 数据加载失败
      error: false,
      //列表分页
      taskPageCtrl: {
        page: 1,
        size: 5,
      },
      // 显示搜索弹窗
      searchPopupShow: false,
    };
  },
  methods: {
    // 刷新
    onRefresh() {
      this.refreshing = true;
      this.finished = false;
      // 重新加载数据
      this.loading = true;
      this.onLoad();
    },
    onLoad() {
      if (this.refreshing) {
        // 清空列表数据
        this.list = [];
        this.taskPageCtrl = {
          page: 1,
          size: 5,
        };
        this.refreshing = false;
      }

      if (!this.finished) {
        const params = {
          RepairId: this.$route.params.id,
          Page: this.taskPageCtrl.page,
          Number: this.taskPageCtrl.size,
          ...this.keywords,
        };

        Pad_Repair_GetMaintenanceResumeInfo(params)
          .then((res) => {
            // 加载状态结束
            this.loading = false;

            if (res.ReturnResult === "1") {
              this.list.push(...res.ReturnData.children);
              // 数据全部加载完成
              if (this.list.length === res.ReturnData.total) {
                this.finished = true;
              }
              this.taskPageCtrl.page++;
            } else {
              this.error = true;
              this.$notify(res.Message);
            }
          })
          .catch((err) => {
            this.$notify(err);
          });
      }
    },
    onSearch() {
      this.onRefresh();
      this.searchPopupShow = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.rep-record {
  position: absolute;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.van-pull-refresh {
  flex: 1;
}

.card-wrap {
  padding: 0 15px;
}

.card-cont {
  padding: 5px 15px;
}

.text-cell {
  padding: 2px 0;

  .van-cell__title,
  .van-cell__value {
    color: #666666;
    text-align: left;
  }
}

.open-link {
  font-size: 12px;
  color: #1364e1;
}
</style>